<template>
    <div class="pub_header" :class="header_config.header_color?'':'pub_header_bg'"
        :style="{backgroundColor:header_config.header_color}">
        <!-- 左侧 -->
        <div class="h_left h_left_1" @click="headerClick('left')" v-if="header_config.left_type==1"
            :style="{'color':header_config.left_color}">{{header_config.left_content}}</div>
        <div class="h_left h_left_2" @click="headerClick('left')" v-if="header_config.left_type==2"
            :style="{'backgroundImage':'url('+header_config.left_content+')'}"></div>
        <div class="h_left h_left_3" @click="headerClick('left')" v-if="header_config.left_type==3">
            <text class="icon-font-basic icon-b-arrow-1-1" :class="`icon_${header_config.left_content}`"></text>
        </div>

        <!-- 标题 -->
        <div class="h_title" v-if="header_config.title_type > 0"
            :class="header_config.title_type==2?'h_title_left':(header_config.title_type==3?'h_title_left_0':'')"
            :style="{'color':header_config.title_color}">{{header_config.title}}</div>

        <!-- 右侧 -->
        <div class="h_right h_right_1" @click="headerClick('right')" v-if="header_config.right_type==1"
            :style="{'color':header_config.right_color}">{{header_config.right_content}}</div>
        <div class="h_right h_right_2" @click="headerClick('right')" v-if="header_config.right_type==2"
            :style="{'backgroundImage':'url('+header_config.right_content+')'}"></div>


        <!-- 搜索 -->
        <div class="h_search" v-if="header_config.search_type == 1">
            <div class="h_input_box">
                <input v-model="keyword" class="h_input" type="text" placeholder="请输入昵称"
                    @confirm="headerClick('search')" @input="keywordChange">
            </div>
            <div class="h_btn" @click="headerClick('search')"></div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        //组件标识
        headerName: {
            type: String,
            default: '',
        },
        //标题栏配置
        headerConfig: {
            type: Object,
            default: () => { return {} }
        }
    },
    data() {
        return {
            keyword: '',//搜索框内容
            header_config: {
                header_color: '',//标题栏背景色

                left_type: 0,//左侧区域类型  0不出现  1文字  2图片  3返回按钮
                left_content: 'dark',//左侧内容  left_type为1时文字内容 为2时图片链接 为3时返回按钮类型(dark,white)
                left_color: '#000000',//左侧文字颜色
                left_back_auto: true,//当left_type为3时，true为不处理逻辑，false为自定义方法进行处理逻辑

                right_type: 0,//右侧区域类型  0不出现  1文字  2图片
                right_content: '',//右侧内容  right_type为1时文字内容 为2时图片链接
                right_color: '#000000',//右侧文字颜色

                title_type: 1,//标题显示类型  1居中  2居左（有箭头）  3居左（无箭头）
                title: '',//标题栏内容
                title_color: '#000000',//标题栏文字颜色

                search_type: 0,//搜索类型 1默认
            },
        };
    },
    watch: {
        headerConfig: {
            handler() {
                // console.log(JSON.stringify(this.headerConfig));
                if (JSON.stringify(this.headerConfig) != '{}') {
                    //根据初始值进行判断 更新传入的键值对数据
                    for (let key in this.$options.data().header_config) {
                        if (key in this.headerConfig) {
                            this.header_config[key] = this.headerConfig[key];
                        }
                    }
                } else {
                    Object.assign(this.$data.header_config, this.$options.data().header_config);
                }
            },
            immediate: true,
            deep: true
        },
    },
    onLoad() { },
    methods: {
        headerClick(type) {
            if (type == 'left' && this.header_config.left_type == 3 && this.header_config.left_back_auto) {
                this.$comFun.closeWin();
                return;
            }
            let data = {
                type: type,
                name: this.headerName
            }
            if (type == 'search') data.keyword = this.keyword;
            if (type == 'searchChange') data.keyword = this.keyword;
            this.$emit('headerBack', data);
        },
        keywordChange() {
            this.headerClick('searchChange')
        }
    },
};
</script>

<style lang="scss" scoped></style>
